<template>
  <a-layout class="layout-demo">
    <a-layout-sider breakpoint="xl">
      <div class="logo" >
        <img width="190" src="../assets/logo.png">
      </div>
      <a-menu
        :default-open-keys="['1']"
        :default-selected-keys="['0_3']"
        :style="{ width: '100%' }"
      >
        <a-sub-menu key="1">
          <template #title>
            <IconCalendar></IconCalendar> 文档编辑
          </template>
          <a-menu-item v-for="doc in docs" @click="handleOpenDoc(doc)">{{ doc.name }}
            <!--            <div class="close"><icon-close /></div>-->
          </a-menu-item>
          <a-menu-item @click="plusDoc"><icon-plus/></a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="2">
          <template #title>
            <icon-brush /> 原型设计
          </template>
          <a-menu-item v-for="prototype in prototypes" @click="handleOpenPrototype(prototype)">{{ prototype.name }}
            <!--            <div class="close"><icon-close /></div>-->
          </a-menu-item>
          <a-menu-item v-if="prototypes.length == 0" @click="plusPrototype"><icon-plus/></a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="3">
          <template #title>
            <icon-nav /> UML图绘制
          </template>
          <a-menu-item v-for="uml in umls" @click="handleOpenUml(uml)">{{ uml.name }}
            <!--            <div class="close"><icon-close /></div>-->
          </a-menu-item>
          <!--          <a-menu-item @click="plusDoc()"><icon-plus/></a-menu-item>-->
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="padding-left: 20px;">
        <a-breadcrumb class="container-breadcrumb">
          <a-breadcrumb-item>项目管理</a-breadcrumb-item>
          <a-breadcrumb-item>项目列表</a-breadcrumb-item>
          <a-breadcrumb-item>{{ projectName }}</a-breadcrumb-item>
        </a-breadcrumb>
        <span>
          <a-button type="text" @click="backToList()">返回</a-button>
        </span>
      </a-layout-header >
      <a-layout class="right-layout">
        <a-tabs type="card-gutter" :editable="true" @delete="handleDelete" @tab-click="handleClick" auto-switch :active-key="nowOpen">
          <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title">
            <div v-if="item.type === 1">
              <TEditor ref="editor" v-model="item.content"/>
              <a-button v-if="item.isLocked == 0" type="outline" @click="submitDoc(item.id, item.content, item.title)">提交</a-button>
              <a-button v-if="item.isLocked !== 0" type="outline" @click="nonono(item.id, item.content, item.title)">只读模式</a-button>
            </div>
            <div v-if="item.type === 2">
              <div id="bar">
                <h1>原型设计</h1>
                <a-button v-on:click="saveDesign" type="primary">保存设计</a-button>
                <a-button v-on:click="exportHtml" type="primary" status="success">导出为HTML</a-button>
              </div>

              <EmailEditor class="design"
                           v-model:editor="editor"
                           :appearance="appearance"
                           :min-height="minHeight"
                           :project-id="projectId"
                           :locale="locale"
                           :tools="tools"
                           :options="options"
                           @load="editorLoaded"
                           @ready="editorReady"
              />
            </div>
            <a-modal v-model:visible="pre" @ok="handleOk" @cancel="handleCancel">
              <template #title>
                  效果图
                </template>
                <div>
                  {{this.count}}
                </div>
              <div v-html="html">
              </div>
              <!-- <Preview v-model:html="html" /> -->
            </a-modal>
            <iframe v-if="item.type === 3" src ="https://online.visual-paradigm.com/app/diagrams/#diagram:proj=0&type=ClassDiagram&width=11&height=8.5&unit=inch" style="width: 1200px; height: 700px">
            </iframe>
          </a-tab-pane>
        </a-tabs>
      </a-layout>
    </a-layout>
  </a-layout>
  <div v-if="plusDocOn==1" class="plusDoc">
    <span>标题 ：</span>
    <input v-model="newDocTitile">
    <div>模板 ：</div>

    <a-radio-group v-model="value1" :options="options1" />
    <a-button type="outline" @click="plusDocSubmit()">新建</a-button>
    <a-button type="outline" @click="plusDocCancel()">取消</a-button>
  </div>
  <div v-if="plusPrototypeOn==1" class="plusDoc">
    <div>标题 ：</div>
    <input v-model="newPrototypeTitile">
    <div>--plusPrototypeOn--</div>
    <a-button type="outline" @click="plusPrototypeSubmit()">新建</a-button>
    <a-button type="outline" @click="plusPrototypeCancel()">取消</a-button>
  </div>
</template>
<script >

// import { EmailEditor } from 'vue-email-editor';
import { useRouter } from 'vue-router';
import { defineComponent, ref, reactive ,shallowRef,onMounted, createApp} from 'vue';
import { Message } from '@arco-design/web-vue';
import {
  IconCaretRight,
  IconCaretLeft,
  IconHome,
  IconCalendar,
} from '@arco-design/web-vue/es/icon';
import TEditor from '@/components/TEditor.vue';
import axios from "axios";
import EmailEditor from '@tofandel/vue-unlayer';
import Preview from './preview.vue';

let count = 1;
let countForNew = -1;
export default defineComponent({
  components: {
    IconCaretRight,
    IconCaretLeft,
    IconHome,
    IconCalendar,
    TEditor,
    EmailEditor,
    Preview
},

  setup(props, { expose }) {
    const routerJump = (type) => {
        // resolve新窗口打开
      const newpage = router.resolve({
        path: '/preview',  // 跳转的页面路由
        query: { // 要传的参数
          type: type
        }
      })
      window.open(newpage.href, '_blank') // 打开新的窗口(跳转路径，跳转类型)
    }

  const router = useRouter();
    let html = shallowRef('');
    const pre = ref(false);
    var projectID= ref(0);
    var projectName= ref('projectName');
    var newDocTitile= ref('');
    var newPrototypeTitile= ref('');
    var oldPrototypeTitile= ref('');
    let editor = shallowRef(null);
     const handleOk = () => {
      pre.value = false;
      saveDesign();
    };
    const handleCancel = () => {
      pre.value = false;
    }
    const editorLoaded = () => {
      console.log('editorLoaded');
      console.log('editorLoaded');
      console.log('editorLoaded');
      console.log(tempDesign);
      const temp = JSON.parse(prototypes.value[0].content);
      editor.value.loadDesign(temp);
    };
// called when the editor has finished loading
    const editorReady = () => {
      console.log('editorReady');
    };
    const saveDesign = () => {
      console.log("saveDesign")
      console.log("saveDesign")
      console.log("saveDesign")
      console.log(newPrototypeTitile)
      const npt = newPrototypeTitile;
      // const opt = oldPrototypeTitile;
      const pid = projectID;
      if (npt.value !== '') {
        editor.value.saveDesign(
          (design) => {
            console.log('saveDesign', design);
            console.log('saveDesign', design);
            console.log('saveDesign', design);
            console.log(npt.value);
            console.log(pid.value);
            axios({
              method: 'post',           /* 指明请求方式，可以是 get 或 post */
              url: 'prototype/save',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
              data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
                projectID: pid.value,
                protName: npt.value,
                tempDesign: JSON.stringify(design)
              })
            }).then(function (response) {
              console.log(response)
              Message.success("新建成功")
            })
          }
        );
      } else {
        editor.value.saveDesign(
          (design) => {
            console.log(npt.value);
            console.log(pid.value);
            axios({
              method: 'post',           /* 指明请求方式，可以是 get 或 post */
              url: 'prototype/modify',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
              data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
                protID: prototypes.value[0].id,
                tempDesign: JSON.stringify(design)
              })
            }).then(function (response) {
              console.log(response)
              Message.success("修改成功")
            })
          }
        );
      }

    };
    const exportHtml = () => {
      editor.value.exportHtml(
        (data) => { 
          console.log('exportHtml', data);
          html = data.html;
          window.localStorage.setItem('html',html);
          // console.log(html,localStorage.getItem('html'))
          console.log(html,'html999999999999999999')
         
          setTimeout(function() {routerJump(); }, 3000);  //5秒后将会调用执行remind()函数
// router.push({path:'/preview'});
          //  pre.value = true;
        },
      );
      
    };
    var tempDesign = {
      counters: {
        u_row: 1,
        u_column: 1,
        u_content_text: 2,
      },
      body: {
        rows: [
          {
            cells: [1],
            columns: [
              {
                contents: [
                  {
                    type: "text",
                    values: {
                      containerPadding: "10px",
                      textAlign: "left",
                      lineHeight: "140%",
                      linkStyle: {
                        inherit: true,
                        linkColor: "#0000ee",
                        linkHoverColor: "#0000ee",
                        linkUnderline: true,
                        linkHoverUnderline: true,
                      },
                      _meta: {
                        htmlID: "u_content_text_2",
                        htmlClassNames: "u_content_text",
                      },
                      selectable: true,
                      draggable: true,
                      duplicatable: true,
                      deletable: true,
                      hideable: true,
                      text:
                        '<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 48px; line-height: 67.2px;">This is an example template. Replace the JSON with your own.</span></p>',
                    },
                  },
                ],
                values: {
                  _meta: {
                    htmlID: "u_column_1",
                    htmlClassNames: "u_column",
                  },
                  border: {},
                  padding: "0px",
                  backgroundColor: "",
                },
              },
            ],
            values: {
              displayCondition: null,
              columns: false,
              backgroundColor: "",
              columnsBackgroundColor: "",
              backgroundImage: {
                url: "",
                fullWidth: true,
                repeat: false,
                center: true,
                cover: false,
              },
              padding: "0px",
              hideDesktop: false,
              _meta: {
                htmlID: "u_row_1",
                htmlClassNames: "u_row",
              },
              selectable: true,
              draggable: true,
              duplicatable: true,
              deletable: true,
              hideable: true,
            },
          },
        ],
        values: {
          textColor: "#000000",
          backgroundColor: "#e7e7e7",
          backgroundImage: {
            url: "",
            fullWidth: true,
            repeat: false,
            center: true,
            cover: false,
          },
          contentWidth: "500px",
          contentAlign: "center",
          fontFamily: {
            label: "Arial",
            value: "arial,helvetica,sans-serif",
          },
          preheaderText: "",
          linkStyle: {
            body: true,
            linkColor: "#e67e23",
            linkHoverColor: "#0000ee",
            linkUnderline: true,
            linkHoverUnderline: true,
            inherit: false,
          },
          _meta: {
            htmlID: "u_body",
            htmlClassNames: "u_body",
          },
        },},
        schemaVersion: 6,
      };

    var docs = ref([
      {
        name: 'doc11',
        id: '123',
        content: '<p><span style="background-color: rgb(224, 62, 45);">asdsadsssssssssssasd</span></p> <p>&nbsp;</p> <p><span style="background-color: rgb(236, 240, 241); color: rgb(224, 62, 45);">adsdsa</span></p>'
      },
      {
        name: 'doc22',
        id: '123222',
        content: ''
      },
    ]);
    var prototypes = ref([
      {
        name: 'prototypes11',
        id: 2223,
        editor:'',
        design:tempDesign
      },
      {
        name: 'prototypes2',
        id: 2223222,
        editor:'',
        design:tempDesign
      },
    ]);
    var umls = ref([
      {
        name: 'Visual Paradigm',
        id: '33123'
      }
    ]);

    const data = ref([
      // {
      //   type: 1,
      //   key: '1',
      //   title: 'Tab 1',
      //   content: '这是文档组件'
      // },
      // {
      //   type: 2,
      //   key: '2',
      //   title: 'Tab 2',
      //   content: '这是原型组件'
      // },
      // {
      //   type: 3,
      //   key: '3',
      //   title: 'Tab 3',
      //   content: '这是uml组件'
      // }
    ]);
    var nowOpen = ref(0);
    // const handleAdd = () => {
    //   const number = count++;
    //   data.value = data.value.concat({
    //     key: `${number}`,
    //     title: `New Tab ${number}`,
    //     content: `Content of New Tab Panel ${number}`
    //   })
    // };
    const handleDelete = (key) => {
      data.value = data.value.filter(item => item.key !== key)
    };


    const handleClick = (key) => {
      nowOpen.value = key;
    };

    const value1 = ref('1');
    const options1 = [
      { label: '项目计划', value: '1' },
      { label: '会议纪要', value: '2' },
      { label: '工作周报', value: '3' },
      { label: '需求规格说明书', value: '4'}
    ];
    const template = ref([
      "template0","<p style=\"text-align: center;\"><strong>项目计划书</strong></p>\n" +
      "<p>一、项目简要介绍</p>\n" +
      "<p>二、项目的内容</p>\n" +
      "<p>三、项目发起人、股东方、管理和技术支持</p>\n" +
      "<p>四、市场和销售安排</p>\n" +
      "<p>&nbsp;</p>","<h2 style=\"text-align: center;\">会议纪要</h2>\n" +
      "<h3>一、会议时间：</h3>\n" +
      "<h3>二、会议地点：</h3>\n" +
      "<h3>三、会议主题：</h3>\n" +
      "<h3>四、会议参与人数：</h3>\n" +
      "<h3>五、与会人员：</h3>\n" +
      "<h3>六、会议地点：</h3>\n" +
      "<h3>七、会议记录：</h3>\n" +
      "<h3>八、会议主要事项：</h3>\n" +
      "<h3>九、会议总结：</h3>\n" +
      "<p style=\"text-align: center;\">&nbsp;</p>","<h1 style=\"text-align: center;\">工作周报</h1>\n" +
      "<h3>本周总结：</h3>\n" +
      "<ol>\n" +
      "<li>&nbsp;&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "</ol>\n" +
      "<h4>本周工作不足：</h4>\n" +
      "<ol>\n" +
      "<li>&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "</ol>\n" +
      "<h3>下周计划：</h3>\n" +
      "<ul>\n" +
      "<li>&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "<li>&nbsp;</li>\n" +
      "</ul>\n" +
      "<p>&nbsp;</p>\n" +
      "<p>汇报人：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;日期：</p>","<h3 style=\"text-align: center;\">xx项目需求规格说明书</h3>\n" +
      "<h4>1.引言</h4>\n" +
      "<h4>2.目的</h4>\n" +
      "<h4>3.适用范围</h4>\n" +
      "<h4>4.术语与缩略语</h4>\n" +
      "<h4>5.参考资料</h4>"
    ]);
    return {
      routerJump,
      temp:"<h1>5555</h1>",
      handleCancel,
      handleOk,
      html,
      value1,
      options1,
      template,
      pre,
      editorLoaded,
      editorReady,
      exportHtml,
      saveDesign,
      editor,
      // emailEditor666:ref(),
      tempDesign,
      nowOpen,
      text: reactive(''),
      docs,
      prototypes,
      umls,
      data,
      // handleAdd,
      handleDelete,
      handleClick,
      plusDocOn: ref(0),
      plusPrototypeOn: ref(0),
      newDocTitile,
      newPrototypeTitile,
      oldPrototypeTitile,
      teamID: ref(0),
      projectID,
      projectName,
      fromWhere: ref(0),
      minHeight: '1000px',
      height:'100%',
      locale: 'zh-CN',
      projectId: 0, // replace with your project id
      tools: {
        // disable image tool
        image: {
          enabled: false,
        },
      },
      options: {},
      appearance: {
        // theme: 'dark',
        panels: {
          tools: {
            dock: 'right',
          },
        },
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      console.log('mounted')
      var teamID = localStorage.getItem("teamID");
      var projectID = localStorage.getItem("projectID");
      var fromWhere = localStorage.getItem("fromWhere");
      var projectName = localStorage.getItem("projectName");
      // this.$refs.emailEditor.editor.loadDesign(design);
      console.log(teamID)
      console.log(projectID)
      console.log(fromWhere)
      this.teamID = teamID
      this.projectID = projectID
      this.fromWhere = fromWhere
      this.projectName = projectName
      this.getDocList();
      this.getPrototypeList();
      // var a666= document.getElementById('email_editor');
      // console.log(a666);
      // this.emailEditor666 = document.getElementsByClassName("design")
    });

  },
  beforeunloadHandler(e) {
    this._beforeUnload_time = new Date().getTime()
    e = e || window.event
    if (e) {
      e.returnValue = '关闭提示'
    }
    return '关闭提示'
  },
  methods: {
    handleOpenDoc(doc) {
      // Message.info({ content: `You select ${uml}`, showIcon: true });
      console.log(doc)
      const num = count++;
      console.log(num)
      var flag = 0;
      for(var i=0 ; i<this.data.length ; i++) {
        if (this.data.at(i).title === doc.name) {
          flag = 1;
          this.nowOpen = this.data.at(i).key;
          break;
        }
      }
      if (flag === 0) {
        this.data = this.data.concat({
          type: 1,
          key: num,
          title: doc.name,
          content: doc.content,
          id: doc.id,
          isLocked: doc.isLocked
        })
        if (doc.isLocked == 0 && doc.id>0) {
          axios({
            method: 'post',           /* 指明请求方式，可以是 get 或 post */
            url: 'document/lockDocument',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
            data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
              docID: doc.id
            })
          }).then(function (response) {
            console.log(response)
          })
        }
        this.nowOpen = num;
      }
    },
    handleOpenPrototype(prototype) {

      if (this.newPrototypeTitile == '') {
        this.oldPrototypeTitile = prototype.title;
      }
      // Message.info({ content: `You select ${uml}`, showIcon: true });
      console.log(prototype)
      const num = count++;
      var flag = 0;
      for(var i=0 ; i<this.data.length ; i++) {
        if (this.data.at(i).title === prototype.name) {
          flag = 1;
          this.nowOpen = this.data.at(i).key;
          break;
        }
      }
      console.log('flag',flag)
      if (flag === 0) {
        this.data = this.data.concat({
          id:prototype.id,
          type: 2,
          key: num,
          title: prototype.name,
          // design:prototype.design todo:直接获取文件对应design
        })
        this.nowOpen = num;
        console.log('thisdata',this.data)
      }
    },
    handleOpenUml(uml) {
      // Message.info({ content: `You select ${uml}`, showIcon: true });
      console.log(uml)
      const num = count++;
      var flag = 0;
      for(var i=0 ; i<this.data.length ; i++) {
        if (this.data.at(i).title === uml.name) {
          flag = 1;
          this.nowOpen = this.data.at(i).key;
          break;
        }
      }
      if (flag === 0) {
        this.data = this.data.concat({
          type: 3,
          key: num,
          title: uml.name,
          content: '这是uml组件'
        })
        this.nowOpen = num;
      }
    },
    plusDoc() {
      console.log('plusDoc')
      this.plusDocOn = 1;
    },
    plusDocSubmit() {
      console.log('plusDocSubmit')
      console.log('plusDocSubmit')
      console.log(this.value1)
      this.plusDocOn = 0;
      var newID = countForNew--;
      const newDoc = {
        name: this.newDocTitile,
        id: newID,
        content: this.template[this.value1],
        isLocked: 0
      }
      this.handleOpenDoc(newDoc);
    },
    plusDocCancel() {
      this.plusDocOn = 0;
    },
    plusPrototype() {
      console.log('plusDoc')
      this.plusPrototypeOn = 1;
    },
    plusPrototypeSubmit() {
      console.log('plusDocSubmit')
      this.plusPrototypeOn = 0;
      var newID = countForNew--;
      const newPrototype = {
        name: this.newPrototypeTitile,
        id: newID,
        content: '',
        isLocked: 0
      }
      this.handleOpenPrototype(newPrototype);
    },
    plusPrototypeCancel() {
      this.plusPrototypeOn = 0;
    },
    submitDoc(id, content, title) {
      console.log(id)
      console.log(content)
      console.log(title)
      const _this = this;
      if (id < 0) {
        axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: 'document/new',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            teamID: _this.teamID,
            projectID: _this.projectID,
            title: title,
            content: content
          })
        }).then(function (response) {
          console.log(response)
          _this.getDocList();
        })
      } else {
        axios({
          method: 'post',           /* 指明请求方式，可以是 get 或 post */
          url: 'document/modify',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
          data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            docID: id,
            content: content
          })
        }).then(function (response) {
          console.log(response)
          _this.getDocList();
        })
      }
      this.data = this.data.filter(item => item.id !== id)
      Message.success("提交成功")
    },
    backToList() {
      const _this = this;
      // _this.$router.push({
      //   path: "/"
      // });
      _this.$router.go(-1);
    },
    getDocList() {
      const _this = this;
      axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: 'document/viewDocList',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          teamID: _this.teamID,
          projectID: _this.projectID
        })
      }).then(function (response) {
        console.log(response)
        _this.docs = [];
        for(var i=0 ; i<response.data.data.length ; i++) {
          console.log(response.data.data[i])
          var title = response.data.data[i].title;
          if (response.data.data[i].isLocked) {
            title = response.data.data[i].title + '(编辑中)';
          }
          _this.docs = _this.docs.concat({
            name: title,
            id: response.data.data[i].id,
            content: response.data.data[i].content,
            isLocked: response.data.data[i].isLocked
          })
        }
        if (_this.fromWhere !== '777') {
          for (var j=0 ; j<_this.docs.length ; j++) {
            if (_this.docs[j].id == _this.fromWhere) {
              _this.handleOpenDoc(_this.docs[j]);
              _this.fromWhere = '777';
              break;
            }
          }
        }
      })
    },
    getPrototypeList() {
      const _this = this;
      axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: 'prototype/list',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          teamID: _this.teamID,
          projectID: _this.projectID
        })
      }).then(function (response) {
        console.log(response)
        _this.prototypes = [];
        var l = 0;
        if (response.data.data.length>0) {
          l = 1;
        }
        for(var i=0 ; i<l ; i++) {
          console.log(response.data.data[i])
          var title = response.data.data[i].protName;
          if (response.data.data[i].isLocked) {
            title = response.data.data[i].protName + '(编辑中)';
          }
          _this.prototypes = _this.prototypes.concat({
            name: title,
            id: response.data.data[i].id,
            content: response.data.data[i].tempDesign,
            isLocked: response.data.data[i].isLocked
          })
        }
        // console.log('eeeeeeeeeee')
        // console.log(_this.tempDesign)
        // _this.tempDesign = JSON.parse(response.data.data[0].tempDesign);
        // console.log(_this.tempDesign)
        // console.log('eeeeeeeeeee')
      })
    }
  }
});


</script>
<style scoped>
.layout-demo {
  height: 1009px;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
  margin-left: -20px;
  margin-top: -20px;
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header)  {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content)  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
.right-layout {
  /*background-color: rgba(190, 213, 234, 0.29);*/
  margin-top: 24px;
  margin-left:24px;
  margin-right: 24px;
  margin-bottom: 32px
}
.close {
  float: right;
  z-index: 10;
}
.plusDoc {
  position: relative;
  top: -760px;
  border-radius: 10px;
  left: 400px;
  z-index: 10;
  height: 200px;
  width: 600px;
  opacity: 60%;
  background-color: #f6fcaa;
}

iframe {
  min-width: 1024px; min-height: 100%; height: 700px; width:1200px; border: 0px;
}

.design {
  height:700px;
}
.design :deep iframe {
  min-width: 1024px; min-height: 100%; height: 700px; width:1200px; border: 0px;

}
</style>
